淺談CSS

從 CSS 發表到現在，一直都被認為是用來定義樣式屬性與排版並撰寫網頁樣式的語言，儘管 CSS 行行單純的屬性描述讓人覺得簡單易懂，但近年來隨著網頁開發複雜度逐漸地提高，在開發大型專案時，許多網頁開發者便開始發現傳統 CSS 的一些問題難以支援大型專案的維護與重製需求。

例如:
1.沒有變數與可重複使用樣式的寫法，會使得邏輯上相近的樣式設定常需要重複撰寫，不易進行 debug，進而導致可維護性較差。
2.在模組化開發時，不能採用嵌套（nested）的寫法，導致需要寫很多重複的選擇器。

為了解決這些問題，網頁開發者就開始思考怎麼讓 CSS 像一般程式語言一樣有變數、函式、迴圈等功能，於是 CSS 預處理器（CSS Preprocessor）就誕生了！透過將程式模組化的概念，新增了變數、巢狀結構、混入、繼承等寫法，作為 CSS 語法的擴充，用以改善程式碼的結構與可維護性。

什麼是 CSS 預處理器？

CSS 預處理器可以說是 CSS 語法的擴充，，用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。為了補足 CSS 在大型專案維護性的不足，CSS 預處理器中新增了變數、混入、繼承、嵌套等寫法，便可以讓CSS 程式碼更加簡潔、適應性更強、可讀性更加清晰且好維護。
目前CSS預處理器技術已經非常成熟，便發展出了很多種不同的CSS預處理器語言。

例如:
-Sass（SCSS）：最廣為開發者使用
-LESS：原先是基於 Ruby 開發，後來改用 Node.js 為基底實作
-Stylus：基於 Node.js 開發
-Turbine
-Swithch CSS
-CSS Cacheer
-DT CSS

前三者為現今較主流的 CSS 預處理器，均賦予 CSS 動態語言的特性，而這些 CSS 預處理器相對於 CSS 算是較高階的語法，需要另外編譯成 CSS，瀏覽器才能看得懂。

為什麼要用 CSS 預處理器？

就如同上面所述，CSS 預處理器有著許多原生CSS沒有的功能，比較適合用在開發大型專案、多人協作的場景，更能發揮它在可維護性上的效果。但若只開發是一般小型的個人 side project 或者單純的活動案，或許使用傳統的 CSS 就很足夠了，也可以省去要建置編譯 CSS 預處理器相關環境的麻煩。